<template>
  <div id="app">
    <el-container>
<!--      <el-aside width="200px" style="height: 800px">-->
        <div style="width: 200px;height: 800px;background-color: #97a8be">
          <ul>
<!--            <li>
              <a href="/personCenter" >个人中心</a>
            </li>-->
            <li >
              <a href="/information" >个人信息</a>
            </li>
            <li >
              <a href="/address">地址</a>
            </li>
            <li >
              <a href="/order">我的订单</a>
            </li>
            <li >
              <a href="/collect">我的收藏</a>
            </li>
          </ul>
        </div>
<!--      </el-aside>-->
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown align="right" style="80px">
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><el-button style="border: white;width: 100%" @click="loginOut">退出</el-button></el-dropdown-item>
              <el-dropdown-item><el-button style="border: white" @click="returnHome">返回主页</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span style="margin-right: 0">{{ this.$store.getters.getUser.loginname }}</span>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Personal",
  methods:{
    returnHome(){
      this.$router.push("/")
    },
    loginOut(){
      sessionStorage.clear();
      this.$router.push("/")
      location.reload();
    }
  }
}
</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  /*.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }*/

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /*text-align: center;*/
    padding: 0;
    margin: 0;
  }


  ul{
    margin-top: 20px;
    margin-left: -50px;
    padding-top: 20px;
  }

  li{
    text-align: center;
    height: 30px;
    margin: 0 auto;
    list-style-type:none;
  }
  li a{
    font-size: 20px;
    color: white;
    height: 100px;
  }
  el-main{
    padding: 0;
    margin: 0;
  }
</style>
